<template>
  <el-form label-position="top" :model="form" :rules="rules" ref="form" >
    <el-form-item :label="`${$t('common.base.content')}：`" prop="content">
      <el-input type="textarea" :placeholder="$t('part.components.partRemarkForm.text1', {max: 500})" :autosize="{ minRows: 2, maxRows: 5}" v-model="form.content"></el-input>
    </el-form-item>
    <el-form-item :label="`${$t('common.base.attachment')}：`" class="no-margin">
      <base-upload :value="form.attachments" @input="upload" @remove="remove"></base-upload>
    </el-form-item>
    <el-form-item :show-message="false">
      <el-checkbox v-model="form.showInOwn" :true-label="1" :false-label="0">{{$t('common.option.commentAction.0')}}</el-checkbox>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'part-remark-form',
  data(){
    return {
      form: {
        attachments: [],
        showInOwn: 0,
        content: ''
      },
    
      rules: {
        content: [
          {required: true, message: this.$t('common.base.tip.inputCommentContent')},
          {max: 500, message: this.$t('part.components.partRemarkForm.text2', {max: 500})}
        ]
      }
    }
  },
  methods: {
    upload(queue){
      this.form.attachments = queue;
    },
    async remove(file){
      if(!await this.$platform.confirm(this.$t('common.form.preview.file.deleteFileTips'))) return;

      let index = -1;
      for(let i = 0; i < this.form.attachments.length; i++){
        let f = this.form.attachments[i];
        if(f.url == file.url){
          index = i;
          break;
        }
      }
      if(index >= 0) this.form.attachments.splice(index, 1);
    },
    async pack(){
      let form = this.form;

      try {
        let isSucc = await this.$refs.form.validate();
        if(isSucc){
          return {
            showInOwn: form.showInOwn,
            attachments: form.attachments,
            content: {
              updateType: 'partRecord',
              updateContent: form.content
            }
          }
        }
      } catch (error) {
        console.log(error)
      }

      return null;
    } 
  }
}
</script>
